<template>
  <el-container>
    <el-header
      style="display:flex;align-items: center;justify-content: space-between;padding: 10px;border-bottom: 1px solid #f2f2f2;">
      <div>
        <svg-icon class="primary" :icon-class="$route.meta.icon"/>
        <span class="primary">{{$route.meta.title}}</span>
        <!--
                <span class="linkAddress">首页链接：http://{{mchId}}.rzico.com</span>
        -->
        <i class="el-icon-document-copy linkAddress_icon" @click="copy"></i>
      </div>
      <div class="header-button-container">
        <el-button icon="el-icon-coin" style="margin-left: 10px" type="primary" :loading="clicked" @click="saveDesigner">保存
        </el-button>
      </div>
    </el-header>
    <div class="designer_box">
      <div class="designer_left">
        <div class="component_box">
          <div class="component" @click="componentClick(index)" v-for="(item,index) in component">
            <i slot="reference" :class="item.icon"></i>
            <span class="component_name">{{item.title}}</span>
            <div class="triangle_border_left" v-show="categoryIndex == index"></div>
          </div>
        </div>
        <div class="component_item_box">
          <draggable
            class="dragArea list-group"
            :list="componentForm"
            :group="{ name: 'comp', pull: 'clone', put: false }"
            @change="log"
          >
            <div class="component_item" v-for="element in componentForm" :key="element.id">
              <div class="component_item_img">
                <img :src="element.img" width="100%" height="100%">
              </div>
              <span class="component_item_name">{{element.title}}</span>
			        <span v-show="element.imgTitle !=null" style="font-size: 12px;color: #A8A9A9;margin-top: 6px;">推荐图片尺寸（{{element.imgTitle}}）</span>
            </div>
          </draggable>
        </div>
      </div>
      <div style="width: 100%;height: calc(100vh - 146px);display: flex;justify-content: center;align-items: center">
        <div class="designer_center">
          <div class="inner-container">
            <div class="element">
              <draggable
                tag="el-collapse"
                class="mobile_draggable"
                :list="designerForm"
                group="comp"
                @change="log"
              >
                <div style="position: relative;" v-for="(item,index) in designerForm"
                     :class="[componentsIndex === index?'component_choose':'']" @click="chooseClick(item,index)">
                  <component :content="item" :key="timer" :is="item.name"/>
                </div>
              </draggable>
            </div>
          </div>
        </div>
      </div>
      <div class="component_Set">
        <div v-if="componentsChoose !=''">
          <el-tabs type="border-card" style="height: calc(100vh - 146px)">
            <el-tab-pane label="组件设置">
              <div>
                <span class="component_Set_Name">标题</span>
                <el-input v-model="designerForm[componentsIndex].title"></el-input>
              </div>
              <div style="margin-top: 10px">
                <span class="component_Set_Name">副标题</span>
                <el-input v-model="designerForm[componentsIndex].subTitle"></el-input>
              </div>
              <div style="margin-top: 10px">
                <span class="component_Set_Name">标签</span>
                <el-select v-model="tagData" multiple placeholder="请选择" @change="selectClick">
                  <el-option
                    v-for="item in tagForm"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id">
                  </el-option>
                </el-select>
              </div>
              <div style="margin-top: 10px"
                   v-show="designerForm[componentsIndex].name !='category_six'&&designerForm[componentsIndex].name !='category_eight'&&designerForm[componentsIndex].name !='category_ten'">
                <span class="component_Set_Name">数量</span>
                <el-input type="number" v-model="designerForm[componentsIndex].rows"></el-input>
              </div>
              <div>
                <el-button style="margin-top: 10px" type="primary" icon="el-icon-check" @click="saveClick">组件预览
                </el-button>
              </div>
              <div>
                <el-button style="margin-top: 10px" type="primary" icon="el-icon-delete" @click="deleteClick">删除组件
                </el-button>
              </div>
            </el-tab-pane>
          </el-tabs>
        </div>
        <div
          style="width: 100%;height: 100%;display: flex;justify-content: center;align-items: center;flex-direction: column"
          v-show="componentsChoose ==''">
          <i style="color: #888888;" class="el-icon-s-tools"></i>
          <span style="font-size: 16px;color: #888888;margin-top: 10px">请点击选择组件</span>
        </div>
      </div>
    </div>
  </el-container>
</template>

<script>
  import restaurantStoe from '@/views/designer/components/restaurantStoe/restaurantStoe'
  import searchWithLocation from '@/views/designer/components/searchWithLocation/searchWithLocation'
  import commonHeader from '@/views/designer/components/commonHeader/commonHeader'
  import recommendShop from '@/views/designer/components/recommendShop/recommendShop'
  import travleRow from "@/views/designer/components/travleRow/travleRow";
  import travelList from '@/views/designer/components/travelList/travelList'
  import watchList from '@/views/designer/components/watchList/watchList'
  import hotpost from '@/views/designer/components/hotpost/hotpost'
  import foodList from '@/views/designer/components/foodList/foodList'
  import foodAd from '@/views/designer/components/foodAd/foodAd'
  import fourAd from '@/views/designer/components/fourAd/fourAd'
  import dinnerSwiper from "@/views/designer/components/shuffling/dinnerSwiper"
  import fundComponent from '@/views/designer/components/fundComponent/fundComponent'
  import swipersTranslate from '@/views/designer/components/shuffling/swipersTranslate'
  import swipersCity from '@/views/designer/components/shuffling/swipersCity'
  import bargainProductRow from '@/views/designer/components/bargainProduct/bargainProductRow'
  import groupProductRow from '@/views/designer/components/groupProduct/groupProductRow'
  import conciseProductRow from '@/views/designer/components/product/conciseProductRow'
  import conciseProduct from '@/views/designer/components/product/conciseProduct'
  import magic_category from '@/views/designer/components/category/magic_category'
  import bargainService from '@/views/designer/components/bargainService/bargainService'
  import bargainProduct from '@/views/designer/components/bargainProduct/bargainProduct'
  import wxHeader from '@/views/designer/components/wxHeader/wxHeader'
  import groupService from './components/groupService/groupService'
  import groupProduct from './components/groupProduct/groupProduct'
  import productRow from './components/product/productRow'
  import swipers from './components/shuffling/swipers'
  import acrossService from './components/appletAd/acrossService'
  import shuffingSmall from './components/shuffling/shuffingSmall'
  import draggable from "vuedraggable";
  import searchFocus from './components/search/search_focus'
  import adBanner from './components/shuffling/adBanner'
  import category_three from './components/category/category_three'
  import category_four from './components/category/category_four'
  import category_five from './components/category/category_five'
  import category_six from './components/category/category_six'
  import category_eight from './components/category/category_eight'
  import category_ten from './components/category/category_ten'
  import category_five_recommend from './components/category/category_five_recommend'
  import orrline_courses from './components/offline_courses/offline_courses';
  import consulting from './components/consulting/consulting';
  import category_headerImg from './components/category/category_headerImg';
  import search from './components/search/search';
  import {list, update} from '@/api/designer'
  import {list as tagList} from '@/api/tag'
  import {mapGetters} from 'vuex'
  import utils from '../../utils/utils'
  import acrossAd from './components/appletAd/acrossAd'
  import hotGoods from './components/hotGoods/hotGoods'
  import xcxAd from './components/xcxAd/xcxAd'
  import brand from './components/brand/brand'
  import wxSearch from './components/search/wxSearch'
  import swipersChange from './components/shuffling/swipersChange'
  import products from './components/product/products'
  import guidelines from './components/guidelines/guidelines'
  export default {
    name: "clone",
    display: "Clone",
    order: 2,
    components: {
      searchWithLocation,
      commonHeader,
      recommendShop,
      productRow,
      travelList,
      watchList,
      foodAd,
      dinnerSwiper,
      products,
      conciseProduct,
      hotpost,
      foodList,
      travleRow,
      fundComponent,
      bargainProductRow,
      conciseProductRow,
      groupProductRow,
      swipersCity,
      magic_category,
      fourAd,
      swipers,
      wxHeader,
      groupProduct,
      swipersTranslate,
      bargainProduct,
      bargainService,
      swipersChange,
      acrossAd,
      wxSearch,
      acrossService,
      brand,
      xcxAd,
      hotGoods,
      draggable,
      shuffingSmall,
      searchFocus,
      groupService,
      orrline_courses,
      consulting,
      category_headerImg,
      search,
      category_three,
      category_four,
      category_five,
      category_six,
      category_eight,
      category_ten,
      adBanner,
      guidelines,
      category_five_recommend,
      restaurantStoe
    },
    data() {
      return {
        id: '',
        component: [
          {
            icon: 'el-icon-search',
            title: '公共组件',
            childs: [
              {
                title: "全屏搜索",
                name: 'searchFocus',
                subTitle:'',
                tagids: '',
                dataType: 20,
                icon: 'el-icon-eleme',
                rows: '1',
                img: 'http://rzico.oss-cn-shenzhen.aliyuncs.com/img/searchFocus.png'
              },
              {
                title: "基金福利专区",
                name: 'fundComponent',
                subTitle:'',
                tagids: '',
                dataType: 20,
                icon: 'el-icon-eleme',
                rows: '1',
                img: 'http://rzico.oss-cn-shenzhen.aliyuncs.com/img/fundComponent.png'
              },
              {
                title: "导航搜索条",
                name: 'wxSearch',
                tagids: '',
                subTitle:'',
                dataType: 20,
                icon: 'el-icon-eleme',
                rows: '1',
                img: 'http://rzico.oss-cn-shenzhen.aliyuncs.com/img/searchImg.png'
              },
              {
                title: "顶部导航",
                name: 'wxHeader',
                subTitle:'',
                tagids: '',
                dataType: 20,
                icon: 'el-icon-eleme',
                rows: '1',
                img: 'http://rzico.oss-cn-shenzhen.aliyuncs.com/img/title.jpg'
              },
              {
                title: "新手指引",
                name: 'guidelines',
                subTitle:'',
                tagids: '',
                dataType: 20,
                icon: 'el-icon-eleme',
                rows: '1',
                img: 'http://rzico.oss-cn-shenzhen.aliyuncs.com/img/guidelines.jpg'
              },
            ]
          },
          {
            icon: 'el-icon-refresh',
            title: '广告组件',
            childs: [

              {
                title: "热点广告",
                name: 'hotpost',
                tagids: '',
                subTitle:'',
                dataType: 8,
                icon: 'el-icon-s-goods',
                rows: '3',
                img: 'http://rzico.oss-cn-shenzhen.aliyuncs.com/dinnerBar/dingdan/d47f415998cc95ca6cc8f8d1175e69f.png',
                imgTitle:'750*510'
              },
              {
                title: "大图广告",
                name: 'foodAd',
                tagids: '',
                subTitle:'',
                dataType: 8,
                icon: 'el-icon-s-goods',
                rows: '3',
                img: 'http://rzico.oss-cn-shenzhen.aliyuncs.com/img/shuffling.png',
                imgTitle:'750*510'
              },
              {
                title: "四大广告",
                name: 'fourAd',
                tagids: '',
                subTitle:'',
                dataType: 8,
                icon: 'el-icon-s-goods',
                rows: '3',
                img: 'http://rzico.oss-cn-shenzhen.aliyuncs.com/dinnerBar/dingdan/20210227163232.png',
                imgTitle:'750*510'
              },
              {
                title: "旅游餐饮轮播",
                name: 'dinnerSwiper',
                tagids: '',
                subTitle:'',
                dataType: 8,
                icon: 'el-icon-s-goods',
                rows: '3',
                img: 'http://rzico.oss-cn-shenzhen.aliyuncs.com/dinnerBar/dingdan/20210227163216.png',
                imgTitle:'750*510'
              },
              {
                title: "全屏轮播图",
                name: 'swipersTranslate',
                tagids: '',
                subTitle:'',
                dataType: 8,
                icon: 'el-icon-s-goods',
                rows: '3',
                img: 'http://rzico.oss-cn-shenzhen.aliyuncs.com/img/shuffling.png',
				imgTitle:'750*510'
              },
              {
                title: "带搜索轮播图",
                name: 'swipers',
                tagids: '',
                subTitle:'',
                dataType: 8,
                icon: 'el-icon-s-goods',
                rows: '3',
                img: 'http://cdn.rzico.com/v4.0/search.png',
				imgTitle:'710*360'

              },
              {
                title: "带定位轮播图",
                name: 'swipersCity',
                tagids: '',
                subTitle:'',
                dataType: 8,
                icon: 'el-icon-s-goods',
                rows: '3',
                img: 'http://cdn.rzico.com/v4.0/search.png',
				imgTitle:'710*360'

              },
              {
                title: "轮播图",
                name: 'swipersChange',
                tagids: '',
                dataType: 8,
                subTitle:'',
                icon: 'el-icon-s-goods',
                rows: '3',
                img: 'http://cdn.rzico.com/img/lunbo.png',
				imgTitle:'710*300'

              },
              {
                title: "广告横幅",
                name: 'adBanner',
                tagids: '',
                dataType: 8,
                subTitle:'',
                icon: 'el-icon-s-goods',
                rows: '1',
                img: 'http://cdn.rzico.com/img/banner.png',
				        imgTitle:'宽（750）高自适应'
              },
            ]
          },
          {
            icon: 'el-icon-monitor',
            title: '专题组件',
            childs: [

              {
                title: "专题组件一",
                name: 'xcxAd',
                tagids: '',
                dataType: 9,
                subTitle:'',
                icon: 'el-icon-s-goods',
                rows: '3',
                img: 'http://cdn.rzico.com/v4.0/wx-page.png'
              },
              {
                title: "专题组件二",
                name: 'hotGoods',
                tagids: '',
                subTitle:'',
                dataType: 9,
                icon: 'el-icon-s-goods',
                rows: '3',
                img: 'http://cdn.rzico.com/v4.0/wx-hotGoods.png'
              },
              {
                title: "专题组件三",
                name: 'acrossService',
                subTitle:'',
                tagids: '',
                dataType: 9,
                icon: 'el-icon-s-goods',
                rows: '3',
                img: 'http://cdn.rzico.com/v4.0/wx-service.jpg'
              },
              {
                title: "专题组件四",
                name: 'acrossAd',
                subTitle:'',
                tagids: '',
                dataType: 9,
                icon: 'el-icon-s-goods',
                rows: '3',
                img: 'http://cdn.rzico.com/v4.0/wx-recommend.png'
              },
              {
                title: "品牌专题五",
                name: 'brand',
                subTitle:'',
                tagids: '',
                dataType: 2,
                icon: 'el-icon-s-goods',
                rows: '3',
                img: 'http://cdn.rzico.com/v4.0/wx-brand.png'
              },
            ]
          },
          {
            icon: 'el-icon-menu',
            title: '导航组件',
            childs: [
              {
                title: "魔方导航",
                name: 'magic_category',
                subTitle:'',
                tagids: '',
                dataType: 9,
                icon: 'el-icon-eleme',
                rows: '3',
                img: 'http://rzico.oss-cn-shenzhen.aliyuncs.com/img/magic_category.jpg'
              },
              {
                title: "页面导航",
                name: 'category_three',
                tagids: '',
                subTitle:'',
                dataType: 9,
                icon: 'el-icon-eleme',
                rows: '3',
                img: 'http://rzico.oss-cn-shenzhen.aliyuncs.com/img/category_three.png'
              },
              {
                title: "四图导航",
                name: 'category_four',
                tagids: '',
                dataType: 9,
                subTitle:'',
                icon: 'el-icon-eleme',
                rows: '4',
                img: 'http://cdn.rzico.com/img/category_four.png'
              },
              {
                title: "五图导航",
                name: 'category_five',
                subTitle:'',
                tagids: '',
                dataType: 9,
                icon: 'el-icon-eleme',
                rows: '5',
                img: 'http://cdn.rzico.com/img/category_five.png'
              },
              {
                title: "六图导航",
                name: 'category_six',
                subTitle:'',
                tagids: '',
                dataType: 9,
                icon: 'el-icon-eleme',
                rows: '6',
                img: 'http://cdn.rzico.com/img/category_six.png'
              },
              {
                title: "八图导航",
                name: 'category_eight',
                subTitle:'',
                tagids: '',
                dataType: 9,
                icon: 'el-icon-eleme',
                rows: '8',
                img: 'http://cdn.rzico.com/img/category_eight.png'
              },
              {
                title: "十图导航",
                name: 'category_ten',
                subTitle:'',
                tagids: '',
                dataType: 9,
                icon: 'el-icon-eleme',
                rows: '10',
                img: 'http://cdn.rzico.com/img/category_ten.png'
              },

            ]
          },
          {
            icon: 'el-icon-monitor',
            title: '美食组件',
            childs: [

              {
                title: "旅游列表",
                name: 'travelList',
                subTitle:'',
                tagids: '',
                dataType: 3,
                icon: 'el-icon-s-goods',
                rows: '3',
                img: 'http://rzico.oss-cn-shenzhen.aliyuncs.com/img/conciseProduct.png'
              },
              {
                title: "看点列表",
                name: 'watchList',
                subTitle:'',
                tagids: '',
                dataType: 3,
                icon: 'el-icon-s-goods',
                rows: '3',
                img: 'http://rzico.oss-cn-shenzhen.aliyuncs.com/img/conciseProduct.png'
              },
              {
                title: "美食列表",
                name: 'foodList',
                subTitle:'',
                tagids: '',
                dataType: 3,
                icon: 'el-icon-s-goods',
                rows: '3',
                img: 'http://rzico.oss-cn-shenzhen.aliyuncs.com/img/conciseProduct.png'
              },
              {
                title: "商品列表",
                name: 'conciseProduct',
                subTitle:'',
                tagids: '',
                dataType: 3,
                icon: 'el-icon-s-goods',
                rows: '3',
                img: 'http://rzico.oss-cn-shenzhen.aliyuncs.com/img/conciseProduct.png'
              },
              {
                title: "商品列表",
                name: 'conciseProductRow',
                tagids: '',
                subTitle:'',
                dataType: 3,
                icon: 'el-icon-s-goods',
                rows: '3',
                img: 'http://rzico.oss-cn-shenzhen.aliyuncs.com/img/conciseProductRow.jpg'
              },
              {
                title: "分页商品列表",
                subTitle:'',
                name: 'products',
                tagids: '',
                dataType: 3,
                icon: 'el-icon-s-goods',
                rows: '3',
                img: 'http://cdn.rzico.com/v4.0/wx-product.png'
              },
              {
                title: "分页商品列表",
                subTitle:'',
                name: 'productRow',
                tagids: '',
                dataType: 3,
                icon: 'el-icon-s-goods',
                rows: '3',
                img: 'http://rzico.oss-cn-shenzhen.aliyuncs.com/img/34df75101efe54055de28c7b315a9ce.png'
              },

            ]
          },
          {
            icon: 'el-icon-monitor',
            title: '热点组件',
            childs: [
              {
                title: "看点列表",
                name: 'watchList',
                subTitle:'',
                tagids: '',
                dataType: 20,
                icon: 'el-icon-s-goods',
                img: 'http://rzico.oss-cn-shenzhen.aliyuncs.com/dinnerBar/dingdan/0a0f11be8eb149c08bf9ea28dbe8977.png'
              },

            ]
          },
          {
            icon: 'el-icon-monitor',
            title: '旅游组件',
            childs: [
              {
                title: "旅游列表",
                name: 'travelList',
                subTitle:'',
                tagids: '',
                dataType: 20,
                icon: 'el-icon-s-goods',
                img: 'http://rzico.oss-cn-shenzhen.aliyuncs.com/dinnerBar/dingdan/0210227163248.png'
              },
              {
                title: "旅游横向列表",
                name: 'travleRow',
                subTitle:'',
                tagids: '',
                dataType: 20,
                icon: 'el-icon-s-goods',
                img: 'http://rzico.oss-cn-shenzhen.aliyuncs.com/dinnerBar/dingdan/20210227163202.png'
              },
            ]
          },
          {
            icon: 'el-icon-monitor',
            title: '百家名店',
            childs: [
              {
                title: "店铺推荐",
                name: 'recommendShop',
                subTitle:'',
                tagids: '',
                dataType: 10,
                icon: 'el-icon-s-goods',
                rows: '3',
                img: 'http://rzico.oss-cn-shenzhen.aliyuncs.com/img/bargainProductSer.png'
              },
              {
                title: "推荐标签的五图导航",
                name: 'category_five_recommend',
                subTitle:'',
                tagids: '',
                dataType: 10,
                icon: 'el-icon-eleme',
                rows: '5',
                img: 'http://cdn.rzico.com/img/category_five.png'
              },
              {
                title: "公用顶部栏",
                name: 'commonHeader',
                subTitle:'',
                tagids: '',
                dataType: 10,
                icon: 'el-icon-s-goods',
                rows: '3',
                img: 'http://rzico.oss-cn-shenzhen.aliyuncs.com/img/bargainProductSer.png'
              },
              {
                title: "带定位的搜索组件",
                name: 'searchWithLocation',
                subTitle:'',
                tagids: '',
                dataType: 10,
                icon: 'el-icon-s-goods',
                rows: '3',
                img: 'http://rzico.oss-cn-shenzhen.aliyuncs.com/img/bargainProductSer.png'
              },
              {
                title: "二级分类页的美食列表",
                name: 'foodList',
                subTitle:'',
                tagids: '',
                dataType: 10,
                icon: 'el-icon-s-goods',
                rows: '3',
                img: 'http://rzico.oss-cn-shenzhen.aliyuncs.com/img/conciseProduct.png'
              },
              {
                title: "横向店铺推荐",
                name: 'restaurantStoe',
                subTitle:'',
                tagids: '',
                dataType: 10,
                icon: 'el-icon-s-goods',
                rows: '3',
                img: 'http://rzico.oss-cn-shenzhen.aliyuncs.com/img/conciseProduct.png'
              },
            ]
          },

        ],
        componentForm: [],
        designerForm: [],
        componentsChoose: '',
        componentsIndex: '',
        pageNum: 1,
        pageSize: 20,
        tagForm: [],
        tagData: [],
        categoryIndex: 0,
        dataType: '',
        timer: '',
        clicked: false
      };
    },
    computed: {
      ...mapGetters([
        'mchId'
      ])
    },
    created() {
      this.id = this.$route.query.id
      this.componentForm = this.component[0].childs
      this.loadDesigner()
      console.log(utils.host())
    },
    methods: {
      log: function (evt) {
        console.log(evt);
        if (evt.added) {
          const item = evt.added.element;
          const idx = this.designerForm.findIndex(e => e.name === item.name);
          let temp = JSON.parse(JSON.stringify(this.designerForm));
          temp[idx].name = item.name;
          this.designerForm = temp;
        }
      },
      componentClick(index) {
        this.categoryIndex = index
        this.componentForm = this.component[index].childs
      },
      chooseClick(data, index) {
        var _this = this
        console.log(data)
        this.componentsChoose = data.name;
        this.componentsIndex = index;
        this.dataType = data.dataType
        if (this.designerForm[this.componentsIndex].tagids == '') {
          this.tagData = []
        } else {
          this.tagData = this.designerForm[this.componentsIndex].tagids.split(",");
          for (var i = 0; i < _this.tagData.length; i++) {
            _this.tagData[i] = parseInt(_this.tagData[i])
          }
        }
        this.loadTag()
      },
      deleteClick: function () {
        this.designerForm.splice(this.componentsIndex, 1);
        this.componentsChoose = '';
        this.componentsIndex = ''
      },
      saveClick() {
        this.timer = new Date().getTime()
      },
      loadTag() {
        var _this = this
        let params = new URLSearchParams();
        params.append('pageNum', _this.pageNum);
        params.append('pageSize', 10000);
        params.append('mchId', _this.mchId);
        params.append('type', _this.dataType)
        tagList(params).then(response => {
          console.log(response)
          _this.tagForm = response.data.data;
        }).catch(error => {
          console.log('error!!')
        });
      },
      loadDesigner() {
        var _this = this;
        let listData = null;
        _this.designerForm = [];
        let params = new URLSearchParams();
        params.append('mchId', _this.mchId);
        params.append("pageId", this.id)
        list(params).then(response => {
          console.log(response)
          for (var i = 0; i < response.data.length; i++) {
            listData = {
              name: response.data[i].name,
              tagids: response.data[i].tagids,
              title: response.data[i].title,
              subTitle:response.data[i].subTitle,
              dataType: response.data[i].dataType,
              rows: response.data[i].rows
            }
            _this.designerForm.push(listData)
            // _this.designerForm = []
          }
        }).catch(error => {
          console.log('error!!')
        });
      },
      selectClick() {
        console.log(this.tagData);
        this.designerForm[this.componentsIndex].tagids = this.tagData.join(",")
      },
      saveDesigner() {
        var _this = this;
        _this.clicked = true
        let designerForm = [];
        let designerData = null
        console.log(_this.designerForm)
        for (var i = 0; i < _this.designerForm.length; i++) {
          if (_this.designerForm[i].tagids != ''||_this.designerForm[i].dataType==20 ) {
            designerData = {
              title: _this.designerForm[i].title,
              name: _this.designerForm[i].name,
              subTitle:_this.designerForm[i].subTitle,
              tagids: _this.designerForm[i].tagids,
              dataType: _this.designerForm[i].dataType,
              rows: _this.designerForm[i].rows,
              pageId: this.id,
            };
            designerForm.push(designerData)
          } else {
            _this.$message({
              message: '您还有标签未选择',
              offset: 120,
              center: true
            })
            _this.clicked = false
            return
          }
        }
        update(designerForm).then(response => {
          console.log(response)
          _this.clicked = false;
          if (response.type == 'success') {
            _this.$message({
              message: response.content,
              offset: 120,
              center: true
            })
            _this.loadDesigner()
          } else {
            _this.$message({
              message: response.content,
              offset: 120,
              center: true
            })
          }
        }).catch(error => {
          _this.clicked = false
        })
      },
      copy() {
        let url = 'http://' + this.mchId + '.rzico.com';
        let oInput = document.createElement('input');
        oInput.value = url;
        document.body.appendChild(oInput);
        oInput.select(); // 选择对象;
        console.log(oInput.value)
        document.execCommand("Copy"); // 执行浏览器复制命令
        this.$message({
          message: '复制成功',
          type: 'success'
        });
        oInput.remove()
      },
      // inputClick(data){
      //   console.log(data)
      //   if (this.designerForm[this.componentsIndex].name !='category_three' || this.designerForm[this.componentsIndex].name !='category_four' || this.designerForm[this.componentsIndex].name !='category_five'){
      //     if (data > 5){
      //       this.$message({
      //         message: '最多只能5个',
      //         type: 'warning'
      //       });
      //       this.designerForm[this.componentsIndex].rows = 5
      //     }
      //   }
      // }
    }
  };
</script>
<style lang="scss" scoped>
  .designer_box {
    display: flex;
    flex-direction: row;
    width: 100%;
    height: calc(100vh - 146px);
    background-color: #f2f2f2;
  }


  .mobile_draggable {
    width: 100%;
    height: 100%;
    border: none;
    background-color: rgba(248, 248, 248, 1);
  }

  .component_box {
    width: 60px;
    height: calc(100vh - 144px);
    background-color: #888888;
  }

  .component {
    width: 60px;
    height: 60px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
  }

  .component_item {
    width: 100%;
    /*height: 40px;*/
    justify-content: center;
    align-items: center;
    display: inline-flex;
    margin-top: 20px;
    flex-direction: column;
  }

  .component_item_box {
    width: 220px;
    height: calc(100vh - 146px);
    background-color: white;
    position: absolute;
    top: 0;
    left: 60px;
    box-shadow: 4px 0 5px -3px rgba(0, 0, 0, .12);
    z-index: 99;
    overflow: auto;
  }

  .component_item_name {
    font-size: 12px;
    margin-top: 10px;
  }

  .designer_left {
    display: flex;
    position: relative;
  }

  /*向左*/

  .triangle_border_left {
    width: 0;
    height: 0;
    border-width: 10px 10px 10px 0;
    border-style: solid;
    border-color: transparent white transparent transparent; /*透明 灰 透明 透明 */
    position: absolute;
    right: 0;
  }

  .component_Set {
    width: 220px;
    height: calc(100vh - 146px);
    background-color: white;
    position: absolute;
    right: 0;
    top: 144px;
    box-shadow: -3px 0 2px 0px rgba(0, 0, 0, .12);
    z-index: 99;
  }

  .component_Set_Name {
    font-size: 16px;
    color: #888888;
    margin-bottom: 10px;
    display: block;
  }

  .component_choose {
    border: 1px dashed #409EFF;
    box-sizing: border-box;
  }

  .component_name {
    font-size: 12px;
    margin-top: 10px;
  }

  /deep/ .el-tabs--border-card {
    border: none;
    box-shadow: none;
  }


  .element, .designer_center {
    width: 375px;
    height: calc(100vh - 180px);
  }

  .designer_center {
    position: relative;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
    border-radius: 4px;
    background-color: rgba(248, 248, 248, 1);

  }

  .inner-container {
    position: absolute;
    overflow-y: scroll;
  }

  .component_item_img {
    width: 140px;
    height: 100%;
  }

  .linkAddress {
    font-size: 16px;
    color: #303133;
    margin-left: 30px;
  }

  .linkAddress_icon {
    font-size: 16px;
    color: #909399;
    margin-left: 10px;
  }
</style>
